<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>工院吐槽吧后台管理页面</title>
    <link rel="stylesheet" href="css/admin.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<div id="app" style="width: 1200px;">

    <div id="nav">
        <div id="imageName">
            <div class="left">
                <div>
                    <span id="adminTitle">树洞后台</span>
                </div>
            </div>
            <div class="right">
                <el-dropdown>
						<span class="el-dropdown-link">
							<el-avatar class="md_headpic" :src="imageUrl" size="medium"></el-avatar>
							{{userNickname}}<i></i>
						</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="go">返回首页</el-dropdown-item>
                        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
    <template>
        <el-tabs type="border-card" @tab-click="management">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-user-solid"></i> 用户管理</span>
                <el-table
                        :data="tableData.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                    <el-table-column label="用户ID" prop="userId" width="300px" align="center">
                    </el-table-column>
                    <el-table-column label="昵称" prop="userName" width="150px" align="center">
                    </el-table-column>
                    <el-table-column label="注册时间" prop="userRegistrationTime" align="center">
                    </el-table-column>
                    <el-table-column label="邮箱" prop="userEmail" align="center">
                    </el-table-column>
                    <el-table-column prop="userRole" label="角色" width="100"
                                     :filters="[{ text: '管理员', value: 'admin' }, { text: '普通用户', value: 'normal' }]"
                                     :filter-method="filterTag" filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.userRole === 'admin' ? 'success' : 'primary'"
                                    disable-transitions>
                                {{scope.row.userRole == 'admin' ? 'admin' : 'normal'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleClick(scope.$index, scope.row)">编辑
                            </el-button>
                            <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
                                    删除</el-button> -->
                            <el-popover :ref='scope.row.userId' placement="top" width="200"
                                        v-model="scope.row.visible">
                                <p> 确定删除用户 "{{scope.row.userName}}" 吗？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="text" @click="$refs[scope.row.userId].doClose()">取消
                                    </el-button>
                                    <el-button type="danger" size="mini"
                                               @click="handleDelete(scope.$index, scope.row)">确定
                                    </el-button>
                                </div>
                                <el-button slot="reference" type="danger" size="mini">删除
                                </el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
                <div class=" block">
                    <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                                   :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-s-promotion"></i> 帖子管理</span>
                <div>
                    <el-table :data="articleData" style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="帖子 ID">
                                        <span>{{ props.row.articleId}}</span>
                                    </el-form-item>
                                    <el-form-item label="用户ID">
                                        <span>{{ props.row.userId}}</span>
                                    </el-form-item>
                                    <el-form-item label="用户号码">
                                        <span>{{ props.row.userTelephoneNumber}}</span>
                                    </el-form-item>
                                    <el-form-item label="是否审核通过">
                                        <span>{{ props.row.articleStatus == 0 ? "审核未通过" : "审核通过" }}</span>
                                    </el-form-item>
                                    <el-form-item label="发布时间">
                                        <span>{{ props.row.articleDate}}</span>
                                    </el-form-item>
                                    <el-form-item label="已赞数">
                                        <span>{{ props.row.articleUpCount}}</span>
                                    </el-form-item>
                                    <el-form-item label="踩赞数">
                                        <span>{{ props.row.articleDownCount}}</span>
                                    </el-form-item>
                                    <el-form-item label="帖子内容" id="articleContent">
                                        <span id="articleContent">{{ props.row.articleContent }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column label="作者" prop="userName" width=100 align="center">
                        </el-table-column>
                        <el-table-column label="帖子标签" prop="articleLabel" align="center">
                        </el-table-column>
                        <el-table-column label="帖子简要内容" prop="simpleComtent" align="center" width=390>
                        </el-table-column>
                        <el-table-column label="点赞数" prop="articleUpCount" align="center">
                        </el-table-column>
                        <el-table-column label="评论数" prop="articleCommentCount" align="center" width=100>
                        </el-table-column>
                        <el-table-column align="right">
                            <template slot-scope="scope">
                                <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
                                        删除</el-button> -->
                                <el-popover :ref='scope.row.articleId' placement="top" width="160"
                                            v-model="scope.row.visible">
                                    <p> 确定删除此帖子吗？</p>
                                    <div style="text-align: right; margin: 0">
                                        <el-button size="mini" type="text"
                                                   @click="$refs[scope.row.articleId].doClose()">取消
                                        </el-button>
                                        <el-button type="danger" size="mini"
                                                   @click="handleDelete2(scope.$index, scope.row)">确定
                                        </el-button>
                                    </div>
                                    <el-button slot="reference" type="danger" size="mini">删除
                                    </el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class=" block">
                        <el-pagination @current-change="handleCurrentChange2" :current-page.sync="currentPage1"
                                       :page-size="10" layout="total, prev, pager, next, jumper" :total="total1">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-s-promotion"></i> 评论管理</span>
                <div>
                    <el-table :data="commentData" style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="评论 ID">
                                        <span>{{ props.row.commentId}}</span>
                                    </el-form-item>
                                    <el-form-item label="用户 ID">
                                        <span>{{ props.row.userId}}</span>
                                    </el-form-item>
                                    <el-form-item label="是否匿名评论">
                                        <span>{{ props.row.commentsStatus == 0 ? "不匿名" : "匿名" }}</span>
                                    </el-form-item>
                                    <el-form-item label="评论内容" id="articleContent">
                                        <span>{{ props.row.commentContent }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column label="评论者" prop="userName" width=100 align="center">
                        </el-table-column>
                        <el-table-column label="评论时间" prop="commentDate" align="center">
                        </el-table-column>
                        <el-table-column label="评论简要内容" prop="simpleComtent" align="center" width=390>
                        </el-table-column>
                        <el-table-column align="right">
                            <template slot-scope="scope">
                                <el-popover :ref='scope.row.commentId' placement="top" width="160"
                                            v-model="scope.row.visible">
                                    <p> 确定删除此评论吗？</p>
                                    <div style="text-align: right; margin: 0">
                                        <el-button size="mini" type="text"
                                                   @click="$refs[scope.row.commentId].doClose()">取消
                                        </el-button>
                                        <el-button type="danger" size="mini"
                                                   @click="handleDelete3(scope.$index, scope.row)">确定
                                        </el-button>
                                    </div>
                                    <el-button slot="reference" type="danger" size="mini">删除
                                    </el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class=" block">
                        <el-pagination @current-change="handleCurrentChange3" :current-page.sync="currentPage2"
                                       :page-size="10" layout="total, prev, pager, next, jumper" :total="total2">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-chicken"></i> 捐赠管理</span>
                <template>
                    <el-table :data="orderData" style="width: 100%"
                              :default-sort="{prop: 'orderDate', order: 'descending'}">
                        <el-table-column label="捐赠日期" width="190" align="center" sortable prop="orderDate">
                            <template slot-scope="scope">
                                <i class="el-icon-time"></i>
                                <span style="margin-left: 10px">{{ scope.row.orderDate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="昵称" width="180" align="center">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p v-if="scope.row.orderBuyerName!='匿名'">捐赠姓名: {{ scope.row.orderBuyerName }}
                                    </p>
                                    <p v-if="scope.row.orderBuyerName!='匿名'">用户ID: {{ scope.row.orderBuyerId }}</p>
                                    <p>捐赠ID: {{ scope.row.orderId }}</p>
                                    <p>捐赠时间: {{ scope.row.orderDate }}</p>
                                    <p>捐赠金额: {{ scope.row.orderAmount }}</p>
                                    <p>支付状态: {{ scope.row.orderStatus == 0 ? '未支付' : '已支付' }}</p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.orderBuyerName }}</el-tag>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="捐赠金额" width=180 align="center" sortable prop="orderAmount">
                            <template slot-scope="scope">
                                <span>{{ scope.row.orderAmount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderStatus" label="支付状态" width="100px"
                                         :filters="[{ text: '已支付', value: 1 }, { text: '未支付', value: 0 }]"
                                         :filter-method="filterTag2" filter-placement="bottom-end">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.orderStatus === 1 ? 'success' : 'primary'"
                                        disable-transitions>
                                    {{ scope.row.orderStatus == 0 ? '未支付' : '已支付'}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-popover :ref='scope.row.orderId' placement="top" width="100px"
                                            v-model="scope.row.visible">
                                    <p> 确定删除此订单吗？</p>
                                    <div style="text-align: right; margin: 0">
                                        <el-button size="mini" type="text"
                                                   @click="$refs[scope.row.orderId].doClose()">取消
                                        </el-button>
                                        <el-button type="danger" size="mini"
                                                   @click="handleDelete4(scope.$index, scope.row)">确定
                                        </el-button>
                                    </div>
                                    <el-button slot="reference" type="danger" size="mini">删除
                                    </el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <div class=" block">
                    <el-pagination @current-change="handleCurrentChange4" :current-page.sync="currentPage3"
                                   :page-size="10" layout="total, prev, pager, next, jumper" :total="total3">
                    </el-pagination>
                </div>
            </el-tab-pane>

            <el-tab-pane>
                <span slot="label"><i class="el-icon-download"></i>导入秘密</span>

                <div style="margin-top: 15px;">
                    <el-input placeholder="输入网址即可" v-model="url_treeHole" class="input-with-select"
                              @keyup.enter.native="getArticleByJsoup" clearable>

                        <el-button slot="append" icon="el-icon-download" @click="getArticleByJsoup"></el-button>
                    </el-input>
                </div>
            </el-tab-pane>


        </el-tabs>
    </template>
    <template>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <el-form :model='dialogData' status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="昵称" prop="userName">
                    <el-input @input="changeInput($event)" type="text" v-model='dialogData.userName'>
                    </el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="userEmail">
                    <el-input @input="changeInput($event)" type="text" v-model='dialogData.userEmail'>
                    </el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select @change='changeAdmin' v-model="userRole" placeholder="用户角色">
                        <el-option label="管理员" value="admin"></el-option>
                        <el-option label="普通用户" value="normal"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="modifyUserInfo">确 定</el-button>
				</span>
        </el-dialog>
    </template>
</div>
</div>
</body>
<script src="js/admin.js"></script>

</html>